﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       base-layout.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    This css file addressses the base layout of the site - full liquid, fixed width or centered,
            module padding, footer sticky to the bottom of the page, sticky to the bottom of the viewport 
            and the clearfix and the holy grail col setup to allow the other layout sheets to work. 
    
               
            The holy grail layouts mean that you have SEO friendly content highest in the markup and provide 
            graceful degradation for non-js users when using a multi column layout in mojoPortal. 
            They are based on the percentage layouts at http://matthewjamestaylor.com/blog/perfect-3-column.htm, 
            but dont use the gutters to avoid float bugs in old IE as is done there. 
            The alternative is to leave everything on a straightforward division of 100% 
            (the maths is easier...) and to use floating and clearing on .ie classes to control the float bugs -
            harder work in the shorterm but much, much easier in the long.
    
    
            The sticky footer work comes from http://www.cssstickyfooter.com/

*/	
 
/* ----------------------------------------------------  alignment ------------------------------------------------ */


/*you could set a max-width in ems to approximate the pixel-based width 
	by dividing the desired width of (ie 960px ) by base font-size (16px) = 60em
    ...recalculate your @media queries in layout.css too!*/
   
     
/* to center and allow full use of wrapper divs...remove for full liquid - all modern browsers.
    The anomalous '#subcontent div' resolves an issue in ie6/7 with max width producing 'hasLayout' 
    and showing the div on occasion if styled directly  */ 
     
   #topbar,#header,#nav,#topcontent,#maincontent,#subcontent div,#footer,#subfooter {max-width:960px;margin:0 auto}

     

	 
/*  ie6 using repond.js - - to center and allow use of wrapper divs...remove for full liquid   */  
@media only screen and (min-width: 960px) {
	.ie6 body { text-align: center; }
	.ie6 #topbar, .ie6 #header, .ie6 #nav, .ie6 #topcontent, .ie6 #maincontent,
	.ie6 #footer,.ie6 #subfooter { text-align: left; width: 960px; }
    
    .ie6 #subcontent div { text-align: left; width: 936px; }

}
   

/* ...when not using respond.js, gives these browsers a fixed width...remove for full liquid */
 

    /*.ie6 body {text-align:center} 
	.ie6 #topbar,.ie6 #header,.ie6 #nav,.ie6 #content,.ie6 #banner,
	.ie6 #maincontent,.ie6 #subcontent,.ie6 #footer {text-align:left; width:960px}*/    
    
    /*.ie7 body {text-align:center} 
	.ie7 #topbar,.ie7 #header,.ie7 #nav,.ie7 #content,.ie7 #banner,
	.ie7 #maincontent,.ie7 #subcontent,.ie7 #footer {text-align:left; width:960px}*/    
    
    
  
/* --------------------------------------------   holy grail col setup ----------------------------------------- */	

	

    /* column container */
    .colmask {position:relative;clear:both;float:left;width:100%; overflow:hidden;}

    /* common column settings */
    .colright,.colmid,.colleft {float:left;width:100%;position:relative;}
    .col1,.col2,.col3 {float:left;position:relative;overflow:hidden;}

    
    
      
	

/* -----------------------------------------   modules --------------------------------------------- */	  

	/* The module padding is set relative to the line heights declared in 'typography'; 0.75em is 1/2 x 1.5 em. 
       Because it is set using em's it will scale with the base font size setting in typography -         
       The value is also used extensively in mojo/admin.css, if you alter it dramatically do a 
       find&replace there. Or use LESS...
        
    */    
		.container, /*self created modules on the layout master and most mp modules use this class; 
                        as it has been added manually to the InnerWrapperPanel control markup in theme.skin*/
        
		.panelwrapper /*a base mp class, some of the admin pages still need it declared*/
 
		{ padding: 0.78125em }               
          
        
        .clearpanel
        
        { clear: both;  } /*another base mp class required on occasion...*/
                          
                          
        /*if you want to add more padding or center content within the content panels...*/   
        
        /*.panelwrapper { max-width: 35em; margin:0 auto }*/        
        
       /*you might need to handle the top and bottom content panels differently
         depending on your column layout selection...*/
       
        /*#topcontent, #subcontent div.panelwrapper { max-width: 35em; margin:0  }*/
     

    

/* -------------------------------------------------   footer -------------------------------------------- */

    
/*set the page and wrapper heights...*/
    html, body, #aspnetForm {height:100%}    
    
    
  
/* footer stick to the bottom of content  */    
    
    /*#page {min-height: 100%}        
    .ie8 #page  {height:auto }  
    .ie6 #page {display:table;height:100%;}*/	
    
    /*footer height optional in this case...*/
    /*#footerwrapper  { height: 150px;  clear:both;  }  
    #footer  { height: 150px;  }*/    
       
    
  



 
/* footer sticking to the bottom of the page  */  

    #page {min-height: 100%}        
    .ie8 #page  {height:auto}	  
    .ie6 #page {display:table;height:100%;}
    
    /*must be same height as the footer*/  	 
    #content {overflow:hidden; padding-bottom: 150px;  }       
    #footerwrapper  { position: relative;  margin-top: -150px;  height: 150px;  clear:both;  }  
    #footer  { height: 150px;  }
    
    /*Opera Fix*/
    body:before {content:"";height:100%;float:left;	width:0;margin-top:-32767px;/}
       
    
    /*content height to 100% height when using sticky footer?  
    Hacking around for now with  excplicit height set here and enforced in ie using jquery minmax, 
    set according to preference...       */ 
    
    
     .col1 {min-height: 25em}        

              
    
        
/* footer stick to the bottom of the viewport */

    /*#page {min-height: 100%}        
    .ie8 #page  {height:auto }  
    .ie6 #page {display:table;height:100%;}

    #content {  padding-bottom: 150px;  }   

    #footerwrapper { position:fixed; bottom:0; left:0; width:100%; }    
    #footer {height: 150px;}*/     


    /* NOT IN IE6; feed this browser standard footer instead*/
    /*.ie6 #footerwrapper { position: relative; margin-top: -150px;  height: 150px; clear:both; }*/  
    

      
/*subfooter*/


/* subfooter positioned floating within the footer*/
    /*#subfooter {float:left; width:100%; padding:0}*/  
       
   /*subfooter positioned absolutely within the footer*/      
   /*#subfooter {position:absolute; bottom:0; left:0; width:100%; padding:0}*/     

   /*subfooter positioned absolutely at the bottom of the viewport (ie6 in footer)  
   #subfooter {width:100%; position:fixed; bottom:0; left:0}     */







    

/* ---------------------------------------------   relative positions ------------------------------------------ */

        /* setting divs relative allows position:absolute to place content within parent...just a convenience*/


        #topbarwrapper,
        #headerwrapper ,
        #navwrapper ,
        #contentwrapper ,
        #topcontentwrapper ,
        #maincontentwrapper ,
        #subcontentwrapper ,
        #footerwrapper,
		#topbar,
        #header ,
        #nav ,
        #content ,
        #topcontent ,
        #maincontent ,
        #subcontent ,
        #footer   {position:relative;}
                       
			
        /*prevents float bugs when no-js */    
        .ie6 #contentwrapper {position:static}  
        

        
              
/* --------------------------------------------------------  clearfix ----------------------------------------------------- */


     
        .cleared:before, .cleared:after {content:"";display:table} /* For modern browsers */
        .cleared:after {clear:both}
        .cleared {zoom:1}  /*For IE 6/7 (trigger hasLayout)*/ 
         
    
    
    


          
        
        
        